<template>
  <div>
    <title-panel />

    <van-form
      input-align="right"
      error-message-align="right"
      :show-error-message="false"
      show-error
      scroll-to-error
      validate-first
      @failed="onFailed"
      @submit="onSubmit"
    >
      <van-cell style="padding: 0">
        <van-field
          class="fromInput"
          clickable
          is-link
          name="earLabelNo"
          label="耳标号"
          v-model="obj.earLabelNo"
          required
          label-width="60%"
          autocomplete="off"
          placeholder="请选择"
          readonly
          input-align="right"
          :rules="[{ required: true, message: '请选择耳标号' }]"
          @click="chooseEarLabel"
        />
        <van-button native-type="button" plain color="#37B5B5" class="addbtn" @click="scanClick()" type="primary"
          >扫一扫</van-button
        >
      </van-cell>
      <van-field
        readonly
        v-model="obj.semenDate"
        name="semenDate"
        label="采精日期"
        is-link
        placeholder="请选择时间"
        input-align="right"
        autocomplete="off"
        required
        @click="showDate = true"
        :rules="[{ required: true, message: '请选择采精日期' }]"
      />
      <van-field
        v-model="obj.semenMilliliters"
        name="semenMilliliters"
        label="采精量（ml）"
        required
        autocomplete="off"
        placeholder="请输入采精量"
        label-width="60%"
        input-align="right"
        :rules="[{ required: true, message: '请输入采精量' }]"
      />
      <van-field
        v-model="obj.spermMotility"
        name="spermMotility"
        label="精子活力（%）"
        autocomplete="off"
        label-width="60%"
        placeholder="请输入精子活力"
        input-align="right"
      />
      <van-field
        :border="false"
        v-model="obj.dilution"
        name="dilution"
        label="稀释倍数"
        autocomplete="off"
        placeholder="请输入稀释倍数"
        input-align="right"
      />
      <div class="spacing" />
      <div class="add-btn">
        <van-button
          block
          type="info"
          color="#37B5B5"
          style="width: 85%; margin: auto; margin-top: 50px"
          native-type="submit"
          size="large"
          :loading="loading"
          loading-text="提交中..."
          >保存</van-button
        >
      </div>
    </van-form>
    <!-- 诊疗日期 -->
    <van-popup v-model="showDate" position="bottom">
      <van-datetime-picker type="date" v-model="currentDate" @confirm="handleConfirm" @cancel="showDate = false" />
    </van-popup>
  </div>
</template>
<script>
import { semenRecordSave } from '@/api/record'
import dayjs from 'dayjs'

import {
  Form,
  Field,
  Calendar,
  RadioGroup,
  Radio,
  Dialog,
  Toast,
  DatetimePicker,
  Picker,
  Button,
  Icon,
  Popup,
  Cell,
  Checkbox,
  CheckboxGroup,
  CellGroup
} from 'vant'
import TitlePanel from '@/components/titlePanel'
import { getValue, clearValue, setValue } from '@/utils/auth'
import moment from 'moment'
export default {
  components: {
    TitlePanel,
    [Form.name]: Form,
    [Field.name]: Field,
    [Calendar.name]: Calendar,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
    [Picker.name]: Picker,
    [DatetimePicker.name]: DatetimePicker,
    [Button.name]: Button,
    [Icon.name]: Icon,
    [Popup.name]: Popup,
    [Toast.name]: Toast,
    [Cell.name]: Cell,
    [Dialog.Component.name]: Dialog.Component,
    [Checkbox.name]: Checkbox,
    [CheckboxGroup.name]: CheckboxGroup,
    [CellGroup.name]: CellGroup
  },
  data() {
    return {
      showDate: false, // 日期展示
      showType: false, // 疫病类型
      showUnit: false, // 单位展示
      showMethod: false, // 方法展示
      loading: false,
      isDisabled: false,
      currentDate: new Date(), // 今天日期
      obj: {
        semenDate: dayjs(new Date()).format('YYYY-MM-DD'),// 采精日期
        earLabelNo: null, // 耳标号
        semenMilliliters: null, // 采精量
        spermMotility: null, // 精子活力
        dilution: null, // 稀释倍数
        houseInfoId: null, // 舍id
        individualInfoId: null // 个体id
      },
      type: null
    }
  },
  created() {},
  mounted() {
    if (getValue('fzmHourseId')) {
      this.obj.houseInfoId = getValue('fzmHourseId')
    }
    this.$bridge.register('backScanData', data => {
      if (JSON.parse(data).individualId) {
        const obj = {
          earLabelNo: JSON.parse(data).earLabelNo,
          id: JSON.parse(data).individualId
        }
        setValue('newEjacu', JSON.stringify(obj))
        this.obj.individualInfoId = JSON.parse(data).individualId
        this.obj.earLabelNo = JSON.parse(data).earLabelNo
        clearValue('earTag2d')
      } else {
        Toast('羊只信息未录入')
        return
      }
    })
    this.$bridge.register('refresh', data => {
      if (getValue('earTag2d')) {
        const earTag2 = JSON.parse(getValue('earTag2d'))
        this.obj.earLabelNo = earTag2.earLabelNo
        this.obj.individualInfoId = earTag2.id
      } else {
        const newEjacu = JSON.parse(getValue('newEjacu'))
        this.obj.earLabelNo = newEjacu.earLabelNo
        this.obj.individualInfoId = newEjacu.id
      }
    })
  },
  methods: {
    scanClick() {
      this.$bridge.call('base.scanOneScan')
    },

    onFailed(errorInfo) {
      Toast(errorInfo.errors[0].message)
    },
    onSubmit() {
      this.loading = true
      Toast.loading({
        forbidClick: true,
        duration: 0
      })
      semenRecordSave(this.obj).then(res => {
        if (res.status === 0) {
          Toast.success('新增成功')
          clearValue('earTag2d')
          clearValue('newEjacu')
          setTimeout(() => {
            this.$bridge.call('base.closePage')
          }, 1000)
        } else {
          Toast.fail(res.msg || '操作失败')
        }
        this.loading = false
      })
    },
    // 选择耳标号
    chooseEarLabel() {
      setValue('fzmSex', '公')
      this.$bridge.call('addCheckEarTag2d')
    },
    // 选择日期1
    handleConfirm(val) {
      this.obj.semenDate = moment(val).format('YYYY-MM-DD')
      this.showDate = false
    }
  }
}
</script>
<style lang="scss" scoped>
.addbtn {
  width: 50px;
  height: 24px;
  font-size: 13px;
  padding: 0;
  margin-right: 13px;
  z-index: 10;
  float: right;
  margin-top: -38px;
}
.places {
  padding: 0 16px;
  box-sizing: border-box;
  .place_item {
    border-bottom: 1px solid #e9e9e9;
    padding: 15px 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
.head {
  display: flex;
  padding: 15px 16px;
  box-sizing: border-box;
  justify-content: space-between;
  font-size: 15px;
  border-bottom: 1px solid #e9e9e9;
  span {
    color: #409eff;
  }
  p {
    color: #666666;
  }
}
.tip {
  padding-top: 15px;
  color: #999999;
  font-size: 12px;
  line-height: 16px;
  margin: auto;
}
.btn {
  width: 80%;
  margin: 50px auto 0 auto;
}
.btn > div {
  height: 50px;
  background: #2871fe;
  border-radius: 4px;
  text-align: center;
  line-height: 50px;
  color: #ffffff;
  font-size: 17px;
}
.btn .cancel {
  margin-top: 20px;
  background: rgba(40, 113, 254, 0.1);
  border: 1px solid #2871fe;
  color: #2871fe;
}
::v-deep .van-field__label {
  width: 6em;
}
.bthStyle {
  width: 56px;
  height: 20px;
  border-radius: 10px;
  border: 1px solid #2871fe;
}
.active {
  background-color: #fff;
  color: #2871fe;
}
.add-btn {
  padding-bottom: 20px;
}
.addbtn {
  width: 50px;
  height: 24px;
  font-size: 13px;
  padding: 0;
  margin-right: 13px;
  z-index: 10;
  float: right;
  margin-top: -38px;
}
.btnfrom {
  padding: 14px 0;
}
.fromInput {
  width: 86%;
}
</style>
